<script setup>
import InputText from "../components/InputText.vue";
import Button from "../components/Button.vue";
import IconSvg from "../components/IconSvg.vue";
import DataTable from "../components/DataTable.vue";
import Model from "../components/Model.vue";
import Message from "../components/Message/Message.js";
import PaginationBasic from "../components/PaginationBasic.vue";
import InputCheckbox from "../components/InputCheckbox.vue";
import InputSelect from "../components/InputSelect.vue";
import Textarea from "../components/Textarea.vue";
import {
  DeviceConstants
} from '../utils/constants.js';
import { ref, onMounted } from "vue"
import axios from "../axios/axios.js";
const searchInfo = ref({ procedureName: '' });
const showAddModel = ref(false)
const addInfo = ref({ isAutoCode: false, procedurehours: 10, deviceidentifyid: 0 })
const isAdd = ref(false)
const deviceIdOptions = ref([])
const showRequirementModel = ref(false)
const requirementInfo = ref("")
const pageData = ref({
  currentPage: 1,
  total: 0,
  pageSize: 10,
})
const handlePageChange = (page) => {
  pageData.value.currentPage = page
  // 这里可以调用接口加载对应页的数据
  getData()
}
const tableData = ref()

// 列配置
const tableColumns = ref([
  { key: 'id', title: '编号', dataIndex: 'id', width: 60 },
  { key: 'procedurecode', title: '工序编号', dataIndex: 'procedurecode' },
  { key: 'procedurename', title: '工序名称', dataIndex: 'procedurename' },
  { key: 'procedurehours', title: '工时', dataIndex: 'procedurehours' },
  { key: 'identification', title: '标识', dataIndex: 'identification' },
  { key: 'requirement', title: '工序要求', dataIndex: 'requirement' },
  { key: 'createtime', title: '创建时间', dataIndex: 'createtime' },
  { key: 'creatername', title: '创建人', dataIndex: 'creatername' },
  { key: 'action', title: '操作', dataIndex: 'action' }
])
const getRoleLabel = (roleValue) => {
  // 从sourceRole中找到value匹配的项，返回其label；未找到则返回默认值
  const role = sourceRole.find(item => item.value === roleValue);
  return role ? role.label : '未知角色';
};
const requirementShow = (item) => {
  console.log(item);

  requirementInfo.value = item.requirement
  showRequirementModel.value = true
}
const closeRequirementModel = () => {
  requirementInfo.value = ""
  showRequirementModel.value = false
}
const openAddModel = () => {
  isAdd.value = true
  showAddModel.value = true
  //getDeviceidentify()
}
const getDeviceidentify = () => {
  axios.get("/api/identify/selectall").then(res => {
    if (res.data.Code === "200") {
      deviceIdOptions.value = res.data.Data.map(item => ({
        value: item.id,
        label: item.name,
      }))
    }
  })
}
const handleConfirm = () => {
  if (!addInfo.value.isAutoCode) {
    if (!addInfo.value.procedurecode || addInfo.value.procedurecode == "") {
      Message.warn('请输入工序编号')
      return
    }
  }

  if (!addInfo.value.procedurename || addInfo.value.procedurename == "") {
    Message.warn('请输入工序名称')
    return
  }

  if (!addInfo.value.procedurehours || addInfo.value.procedurehours == "") {
    Message.warn('请输入标准工时')
    return
  }
  if (addInfo.value.procedurehours < 1) {
    Message.warn('请规范输入标准工时')
    return
  }
  if (!addInfo.value.requirement || addInfo.value.requirement == "") {
    Message.warn('请输入工序要求')
    return
  }

  if (isAdd.value) {
    Message.success('正在添加', 700)
    axios.post("/api/procedure/save", {
      ...addInfo.value, procedurecode: addInfo.value.isAutoCode ? null : addInfo.value.procedurecode,
      procedurename: addInfo.value.procedurename,
    }).then(res => {
      if (res.data.Code == "200") {
        Message.success('添加成功')
        showAddModel.value = false
        isAdd.value = false
        getData()
      } else {
        Message.warn(res.data.Msg)
      }
    })
  } else {
    axios.post('/api/procedure/updatebyid',
      {
        id: addInfo.value.id,
        procedurename: addInfo.value.procedurename,
      }).then(res => {
        if (res.data.Code == "200") {
          Message.success('修改成功')
          showAddModel.value = false
          getData()
        } else {
          Message.warn(res.data.Msg)
        }
      })

  }
}
const handleCancel = () => {
  isAdd.value = false
  addInfo.value = { isAutoCode: false, procedurehours: 10, deviceidentifyid: 0 }
  showAddModel.value = false
}
const handleEdit = (item) => {
  addInfo.value = { ...item }
  showAddModel.value = true
}
const handleDelete = (item) => {
  axios.get('/api/procedure/delete?id=' + item.id).then(res => {
    if (res.data.Code == "200") {
      Message.success('删除成功')
      getData()
    } else {
      Message.warn(res.data.Msg)
    }
  })
}
const resetSearch = () => {
  searchInfo.value = { procedureName: '' }
  getData()
}
const getData = () => {
  var url = '/api/procedure/select?pageNum=' + pageData.value.currentPage + "&pageSize=" + pageData.value.pageSize
  if (searchInfo.value.procedureName !== '') {
    url = url + "&procedureName=" + searchInfo.value.procedureName
  }
  axios.get(url).then(res => {
    tableData.value = res.data.Data.records
    pageData.value = {
      currentPage: pageData.value.currentPage === undefined ? 1 : pageData.value.currentPage,
      total: res.data.Data.total,
      pageSize: res.data.Data.size,
    }

  })
}

onMounted(() => {
  getData()

});
const testnum = ref(1)
const test = () => {
  console.log(111);

  Message.success('Hello, Ant Design!' + testnum.value)
  Message.warn('Hello, Ant Design!' + testnum.value)
  Message.error('Hello, Ant Design!' + testnum.value)
  Message.info('Hello, Ant Design!' + testnum.value)
  testnum.value = testnum.value + 1
}
</script>
<template>
  <div class="bg-[white] w-full h-full pt-[40px] px-[40px] text-base flex flex-col">
    <div class="flex justify-start items-center">
      <InputText type="text" label="工序名称" placeholder="请输入工序名称" class="w-[300px] mr-[20px]"
        v-model="searchInfo.procedureName" label-width="60px" />
      <Button type="primary" content="查询" class="mr-[20px]" @click="getData">
        <template #icon>
          <IconSvg name="search" class="w-[18px] h-[18px]"></IconSvg>
        </template>
      </Button>
      <Button content="重置" class="mr-[20px]" @click="resetSearch">
        <template #icon>
          <IconSvg name="refresh" class="w-[15px] h-[15px]"></IconSvg>
        </template>
      </Button>
    </div>
    <div class="mt-[40px] flex-1 overflow-auto">
      <div class="flex justify-start items-center">
        <Button type="primary" content="新增" class="mr-[20px]" @click="openAddModel" v-perm="'procedure:add'">
          <template #icon>
            <IconSvg name="add" class="w-[18px] h-[18px]"></IconSvg>
          </template>
        </Button>
        <!-- <Button type="primary" content="11" class="mr-[20px]" @click="test" v-perm="'procedure:add'">
          <template #icon>
            <IconSvg name="add" class="w-[18px] h-[18px]"></IconSvg>
          </template>
        </Button> -->
      </div>

      <DataTable :dataSource="tableData" :columns="tableColumns" class="mt-[20px]">
        <template #procedurehours="{ item }">
          {{ item.procedurehours + "秒" }}
        </template>
        <template #requirement="{ item }">
          <a @click="requirementShow(item)" class="text-[#165dff] cursor-pointer">查看</a>
        </template>
        <template #action="{ item }">
          <a @click="handleEdit(item)" class="text-[#165dff] cursor-pointer">编辑</a>
          <!-- <a @click="handleDelete(item)" class="ml-2 text-red-500 cursor-pointer">删除</a> -->
        </template>
      </DataTable>

    </div>
    <div class="flex justify-end items-center my-4" v-if="pageData.total > 0">
      <label class="font-medium">共{{ pageData.total }}条</label>
      <PaginationBasic :total="pageData.total" :page-size="pageData.pageSize" v-model:current="pageData.currentPage"
        @onPageChange="handlePageChange" />
    </div>
    <div>

    </div>
    <Model :show="showAddModel" @close="!showAddModel">
      <template #header>
        <h3>添加工序</h3>
      </template>
      <template #body>
        <div class="flex flex-col gap-[15px]">
          <div class="flex" v-if="isAdd">
            <InputText type="text" label="工序编号" class="w-[380px]" v-model="addInfo.procedurecode" label-width="80px"
              align="right" :required="true" v-if="!addInfo.isAutoCode" />
            <InputCheckbox label="工序编号" labelWidth="80px" align="right" :required="true" v-model="addInfo.isAutoCode"
              v-if="addInfo.isAutoCode">
              <template #text>
                自动生成编号
              </template>
            </InputCheckbox>
            <InputCheckbox v-model="addInfo.isAutoCode" v-if="!addInfo.isAutoCode">
              <template #text>
                自动生成编号
              </template>
            </InputCheckbox>
          </div>
          <InputText type="text" label="工序名称" class="w-[500px]" v-model="addInfo.procedurename" label-width="80px"
            align="right" :required="true" />
          <div class="flex items-center" v-if="isAdd">
            <InputText type="number" label="标准工时" class="w-[475px]" v-model="addInfo.procedurehours" label-width="80px"
              align="right" :required="true" /><label class="ml-[5px]">秒</label>
          </div>

          <Textarea type="text" label="工序要求" class="w-[500px]" v-model="addInfo.requirement" label-width="80px"
            align="right" :required="true" v-if="isAdd" />
          <InputSelect label="关联设备" class="w-[500px]" label-width="80px" align="right"
            v-model="addInfo.deviceidentifyid" v-if="isAdd">
            <option value=0>请选择设备</option>
            <option v-for="(name, id) in DeviceConstants.TYPE_MAP" :value="id">{{ name }}</option>
          </InputSelect>
        </div>

      </template>
      <template #footer>
        <div class="flex justify-around">
          <Button content="取消" @click="handleCancel"></Button>
          <Button type="primary" content="确定" @click="handleConfirm"></Button>
        </div>
      </template>
    </Model>
    <Model :show="showRequirementModel" @close="closeRequirementModel">
      <template #header>
        <h3>工序要求</h3>
      </template>
      <template #body>
        <div class="p-2 max-h-[500px] overflow-auto-y-auto">
          {{ requirementInfo }}
        </div>
      </template>
      <template #footer>
        <div class="flex justify-end">
          <Button content="关闭" @click="closeRequirementModel"></Button>
        </div>
      </template>
    </Model>
  </div>
</template>

<style scoped></style>
